<script>
export default{
	props:{
		api:{
			type:Object,
			default(){
				return {}
			}
		},//api
		num:{
			type:Number,
			default:1
		},//上传限制数量
		fileup:{
			type:Object,
			default(){
				return {
					file:{},
					filelist:[],
				}
			}
		},//控件上传列表
		accept:String,
		ext:String,
	},
	watch:{
	},
	data(){
		return {
			loading:false,//上传中
		}
	},
	created(){

	},
	methods:{
		beforeUpload(file,fileList){
			console.log('beforeUpload',file,fileList)
			console.log(fileList.length,this.fileup.filelist.length);

			if(this.fileup.filelist.length>=this.num){
				this.$message.error('最多允许上传 ' +this.num+'张');
				fileList.splice(0,1)
				return false;
			}
			if(this.fileup.filelist.length+fileList.length>this.num){
				fileList.splice(0,1)
				this.$message.error('最多允许上传 ' +this.num+'张');
				return false;
			}

			if(this.ext){
				let fx = file.name.split('.')
				console.log(this.ext,fx[fx.length-1],fx)
				if(this.ext!=fx[fx.length-1]){
					this.$message.error('无效文件：'+file.name);
					fileList.splice(0,1)
					return false;
				}
			}
			console.log('----------------------',file)
			this.checkfile(file);
			// const isimg = file.type === 'video/mp4' || file.type === 'image/png';
			// if (!isimg) {
			// 	this.$message.error('You can only upload JPG file!',0);
			// 	reject();
			// }
			// const isLt2M = file.size / 1024 / 1024 < 2;
			// if (!isLt2M) {
			// 	this.$message.error('Image must smaller than 2MB!');
			// 	reject();
			// }
			return true;
		},//
		handleChange(info){
			console.log('-----------info',info.file.status,info)
			if (info.file.status === 'uploading') {
				this.loading = true;

				return;
			}
			if (info.file.status === 'done') {
				this.$message.success('上传成功');
				this.$emit('done',info.file.response.data.url);
				this.loading = false;
			}
			if (info.file.status === 'error') {
				this.loading = false;
				this.$message.error('upload error');
			}
			if (info.file.status === 'removed') {
				this.$emit('del',info.file)
			}
		},
		urlList(){
			let arr = [];
			this.fileup.filelist.forEach(item => {
				arr.push(item.response?.url||item.url);
			});
			console.log(this.fileup.filelist,arr)
			return arr;
		},
		async checkfile(files){
			let rs = await this.$getFileInfo(files)
			this.upVideothumb(rs.cover)
			console.log(101,files,rs)
		},
		async upVideothumb(dataurl){
			console.log(dataurl)
			var arr = dataurl.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			let form = new FormData();
			form.append('file',new File([u8arr], new Date().getTime()+'.png', { type: mime }));
			let rs = await this.muajax.uploadFile(form);
			if(rs.status==200){
				this.$emit('videothumb',rs.data.url)
			}
		},
	}
}
</script>
<template>
	<div>
		<!-- <input type="file" @change="checkfile($event)"> -->
			<!-- :showUploadList="false" -->
		<a-upload
			:multiple="num>1"
			v-model:file-list="fileup.filelist"
			name="file"
			:action="muajax.inst.defaults.baseURL+api.url"
			:headers="{token:$store.state.user.token}"
			:data="{}"
			:before-upload="beforeUpload"
			@change="handleChange"
		>
			<a-button :disabled="fileup.filelist.length >= num || loading" :loading="loading">
				<loading-outlined v-if="loading"></loading-outlined>
				<upload-outlined v-else></upload-outlined>
				选择文件
			</a-button>
		</a-upload>
		<!-- <a-row v-for="(v,k) in fileup.filelist">
			<a-col :span="20">
				{{ v.url }}
			</a-col>
			<a-col :span="4">
				<DeleteOutlined @click="$emit('del',v);fileup.filelist.splice(k,1)" />
			</a-col>
		</a-row> -->
	</div>
</template>